<template>
    <div class="content">
        <div class="card">
            <div class="tableBox">
                <a-table :loading="loading"
                         childrenColumnName="childrenMenus"
                         :dataSource="tableData"
                         :rowKey="(record , index) => {return record.id}"
                         :pagination="pagination"
                         :columns="columns">
                    <template #button="{ text}">
                        <span style="color: #4EB1F7" v-if="text=='1'">是</span>
                        <span v-else style="color: #0FBA8E">否</span>
                    </template>
                    <template #show="{ text}">
                        <span style="color: #4EB1F7" v-if="text=='1'">是</span>
                        <span v-else style="color: #0FBA8E">否</span>
                    </template>
                    <template #time="{record}">
                        {{record.beginTime}} - {{record.endTime}}
                    </template>
<!--                    <template #action="{record}">-->
<!--                        <a-button type="link" @click="editHandle(record)">编辑</a-button>-->

<!--                    </template>-->
                </a-table>
            </div>
        </div>
    </div>
</template>

<script>

import {defineComponent, onMounted,reactive, toRefs} from "vue";
import {message, Empty} from "ant-design-vue";
import {apiGetShopList} from "../../api";
export default defineComponent({
    name: "index",
    setup() {
        const state = reactive({

        })
        const tableDataObj = reactive({
            loading: false,
            tableData: [
                {}
            ],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 1,
                showSizeChanger: true,
                showTotal: (total) => {
                    return `共 ${total} 条`
                }
            },
            scroll: { x: 1000, y: 300 },
            columns: [
                {
                    title: "序号",
                    width: 150,
                    align: 'center',
                    customRender: (text) => `${text.index + 1}`
                },
                {
                    title: "店铺名称",
                    dataIndex: "name",
                    key: "name",
                    align: 'center',
                    width: 120,
                    ellipsis: true
                },
                {
                    title: "店铺类型",
                    dataIndex: "typeName",
                    align: 'center',
                    width: 200,
                    key: "typeName",
                    ellipsis: true
                },
                {
                    title: "店铺地址",
                    dataIndex: "address",
                    key: "address",
                    align: 'center',
                    width: 250,
                    ellipsis: true
                },
                {
                    title: "营业时间",
                    dataIndex: "sort",
                    align: 'center',
                    key: "sort",
                    slots: { customRender: 'time'},
                    ellipsis: true
                },
                // {
                //     title: "是否按钮",
                //     dataIndex: "isBitton",
                //     key: "isBitton",
                //     align: 'center',
                //     ellipsis: true,
                //     slots: { customRender: 'button'}
                // },
                // {
                //     title: "是否显示",
                //     dataIndex: "isShow",
                //     align: 'center',
                //     key: "isShow",
                //     ellipsis: true,
                //     slots: { customRender: 'show'}
                // },
                {
                    title: "添加时间",
                    dataIndex: "createTime",
                    align: 'center',
                    key: "createTime",
                    width: 200,
                    ellipsis: true
                },
                // {
                //     title: "操作",
                //     key: "action",
                //     align: 'center',
                //     width: 150,
                //     slots: {
                //         customRender: "action"
                //     }
                // }
            ]
        })
        // 获取店铺列表
        const getList = () => {
            const params = {
                limit: 10,
                page: 1,
            }
            apiGetShopList(params).then((res) => {
                if (res.data.code == 200) {
                    tableDataObj.tableData = res.data.data.list
                    tableDataObj.pagination.total = res.data.data.totalCount
                }
            })
        }
        onMounted(() => {
            getList()
        })
        return{
            ...toRefs(tableDataObj),
            ...toRefs(state),
        }
    }
})
</script>

<style lang="less" scoped>
.content{
    width: 100%;
    height: 100%;

    .card {
        height: 100%;
        //background: #364d79;
        margin: 10px;

        .button {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 15px;
        }
    }
}
</style>
